<template>
  <div class="app-container home">
    <!--数量统计    -->
    <el-row :gutter="20">
      <el-col :span="4" class="col-item">
        <el-card class="box-card">
          <div style="display: flex;align-items: center;">
            <div class="el-icon-collection-tag" style="font-size: 54px;color: crimson">
            </div>
            <div>
              <div class="text item" style="font-size: 20px;">
                班级总数量
              </div>
              <div class="text item" style="font-size: 20px;">
               <template v-if="classCount">
                   {{classCount}}
               </template>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" class="col-item">
        <el-card class="box-card">
          <div style="display: flex;align-items: center;">
            <div class="el-icon-s-custom" style="font-size: 54px;color: deepskyblue">
            </div>
            <div>
              <div class="text item" style="font-size: 20px;">
                学员总数量
              </div>
              <div class="text item" style="font-size: 20px;">
                <template v-if="studentCount">
                  {{studentCount}}
                </template>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" class="col-item">
        <el-card class="box-card">
          <div style="display: flex;align-items: center;">
            <div class="el-icon-s-flag" style="font-size: 54px;color: green">
            </div>
            <div>
              <div class="text item" style="font-size: 20px;">
                老师任务数
              </div>
              <div class="text item" style="font-size: 20px;">
                <template v-if="teacherCount">
                  {{teacherCount}}
                </template>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" class="col-item">
        <el-card class="box-card">
          <div style="display: flex;align-items: center;">
            <div class="el-icon-message-solid" style="font-size: 54px;color: yellowgreen">
            </div>
            <div>
              <div class="text item" style="font-size: 20px;">
                学生跟踪数
              </div>
              <div class="text item" style="font-size: 20px;">
                100
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" class="col-item">
        <el-card class="box-card">
          <div style="display: flex;align-items: center;">
            <div class="el-icon-s-claim" style="font-size: 54px;color: pink">
            </div>
            <div>
              <div class="text item" style="font-size: 20px;">
                待帮扶数量
              </div>
              <div class="text item" style="font-size: 20px;">
                <template v-if="seekAssistStudents">
                  {{seekAssistStudents}}
                </template>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-drawer
        title="个人任务"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <el-table border :data="relationshipList">
          <el-table-column label="标题" align="center" prop="title" />
          <el-table-column label="任务详情" align="center" prop="details" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="getTaskHandle(scope.row)"
                v-hasPermi="['teacher:task:edit']"
              >去做任务</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </el-row>
    <!-- 排行榜   -->
    <el-row :gutter="20" style="display: flex;align-items: center;">
      <el-col :span="4" class="col-item">
        <div class="bordered-container">
          <ul class="bordered-list">
            <li style="background: #99a9bf;color: #1e1e1e;font-weight: bolder">推荐之最</li>
            <template v-for="(item,index) in teacherRanking">
              <li>{{item}}</li>
            </template>
          </ul>
        </div>
      </el-col>
      <el-col :span="4" class="col-item">
        <div class="bordered-container">
          <ul class="bordered-list">
            <li style="background: #99a9bf;color: #1e1e1e;font-weight: bolder">跟踪之最</li>
            <template v-for="(item,index) in teacherRanking">
              <li>{{item}}</li>
            </template>
          </ul>
        </div>
      </el-col>
      <el-col :span="4" class="col-item">
        <div class="bordered-container">
          <ul class="bordered-list">
            <li style="background: #99a9bf;color: #1e1e1e;font-weight: bolder">任务之最</li>
            <template v-for="(item,index) in teacherRanking">
              <li>{{item}}</li>
            </template>
          </ul>
        </div>
      </el-col>
      <el-col :span="4" class="col-item">
        <div class="bordered-container">
          <ul class="bordered-list">
            <li style="background: #99a9bf;color: #1e1e1e;font-weight: bolder">绩效之最</li>
            <template v-for="(item,index) in teacherRanking">
              <li>{{item}}</li>
            </template>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!-- 图表   -->
    <el-divider/>
    <el-row :gutter="20" >
      <div style="display: flex;align-items: center;">
      <div id="line-enrollstudent-echarts" style="width: 100%; height: 400px;">
      </div>
      <div id="line-employment-echarts" style="width: 100%; height: 400px;">
      </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {loadIndexData} from "@/api/login";
import Template from "@/views/performance/template/index.vue";
import {teacherUncompletedTask} from "@/api/teacher/relationship";

export default {
  name: "Index",
  components: {Template},
  data() {
    return {
      relationshipList:[],
      drawer: false,
      direction: 'rtl',

      // 版本号
      version: "3.6.3",
      chartDom: null,
      myChart: null,
      option: null,
      datasm: ['第1周', '第二周', '第三周', '第四周'],
      datasj: [100, 200, 100, 150],
      somedata: [],
      pageHomeData:null,
      teacherCount:null,
      teacherRanking:[],
      classCount:null,
      studentCount:null,
      seekAssistStudents:null,

    };
  },
  methods: {
    //跳转页面
    getTaskHandle(){
      this.drawer=false;
      this.$notify.closeAll();
      this.$router.push({path: 'employment/studentHelp'});
    },
    //获取当前登录人的任务
    getTask() {
      teacherUncompletedTask().then(res=>{
        if(res.code==200){
          this.taskMessage(res.data.length);
          this.relationshipList=res.data;
        }
      })
    },
    //任务通知
    taskMessage(mes) {
      this.$notify.error({
        title: '提示',
        dangerouslyUseHTMLString: true,
        message: '您有<span style="color: red">'+mes+'</span>个新的任务',
        duration: 0,
        onClick: () => {
         this.drawer=true;
        }
      });
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },



    goTarget(href) {
      window.open(href, "_blank");
    },
    eChartsLine() {
      console.log(this.chartDom, "-----")
      // 获取图表容器
      this.chartDom = document.getElementById('line-enrollstudent-echarts');
      // 初始化ECharts实例
      this.myChart = echarts.init(this.chartDom);
      // 配置图表数据及选项
      this.option = {
        xAxis: {
          type: 'category', // 横轴一般为类别轴（如果是时间序列，则为'time'类型）
          // 横轴标签
          data: this.datasm
        },
        yAxis: {
          type: 'value', // 纵轴一般为数值轴
        },
        series: [{
          data: this.datasj, // 折线图的数据序列
          type: 'line', // 图表类型为折线图
          smooth: true, // 可选，是否平滑曲线显示
        }],
        title: {
          text: '招生数据'
        },
        tooltip: {} // 可选，提示框组件配置
      };
      // 将配置项给ECharts实例对象
      this.myChart.setOption(this.option);
    },

    employmentEcharts() {
      console.log(this.chartDom, "-----")
      // 获取图表容器
      this.chartDom = document.getElementById('line-employment-echarts');
      // 初始化ECharts实例
      this.myChart = echarts.init(this.chartDom);
      // 配置图表数据及选项
      this.option = {
        xAxis: {
          type: 'category', // 横轴一般为类别轴（如果是时间序列，则为'time'类型）
          // 横轴标签
          data: this.datasm
        },
        yAxis: {
          type: 'value', // 纵轴一般为数值轴
        },
        series: [{
          data: this.datasj, // 折线图的数据序列
          type: 'line', // 图表类型为折线图
          smooth: true, // 可选，是否平滑曲线显示
        }],
        title: {
          text: '就业数据'
        },
        tooltip: {} // 可选，提示框组件配置
      };
      // 将配置项给ECharts实例对象
      this.myChart.setOption(this.option);
    },
    //获取后台数据
  loadHomePageData(){
    loadIndexData().then(res=>{
      let{code,data}=res;
      if(code===200){
        this.pageHomeData=data;
        this.teacherCount=data.teacherCount;
        this.teacherRanking=data.teacherRanking;
        this.classCount=data.classCount;
        this.studentCount=data.studentCount;
        this.seekAssistStudents=data.seekAssistStudents;
        console.log(this.pageHomeData)
      }
    })
  }
  },
  mounted() {
    this.eChartsLine();
    this.employmentEcharts();
    this.loadHomePageData();
    this.getTask();
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

ul.bordered-list {

  list-style-type: none; /* 移除默认的项目符号 */

  padding: 0; /* 移除默认的内边距 */

}


ul.bordered-list li {

  border: 1px solid #ccc; /* 边框样式，这里使用了灰色边框 */
  font-size: 18px;

  margin-bottom: 0; /* 为列表项之间添加间距 */

  padding: 5px; /* 内边距，增加文字与边框间的距离 */

  border-radius: 5px; /* 可选，添加圆角边框 */

}
</style>

